<template>
  <div>
    <div text-center py-75 >
      <h1 text-35 mb-14>产品优势</h1>
      <div class="text-#5F6368 text-14 mb-62">
        安全可靠、功能强大的支付解决方案，满足您的业务需求
      </div>
      <div class="advantage-grid m-auto">
        <div v-for="(i, idx) in advantageList" :key="idx" class="advantage-item text-center">
          <div class="icon-wrap">
            <img :src="i.icon" alt="" />
          </div>
          <h2 class="text-21 mt-22 mb-16">{{ i.title }}</h2>
          <div class="text-#5F6368 text-14 line-height-24">{{ i.desc }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import icon1 from '@/assets/image/advantage1.png'
import icon2 from '@/assets/image/advantage2.png'
import icon3 from '@/assets/image/advantage3.png'
import icon4 from '@/assets/image/advantage4.png'
import icon5 from '@/assets/image/advantage5.png'
import icon6 from '@/assets/image/advantage6.png'
import { ref, reactive } from 'vue'
const advantageList = reactive([
  {
    icon: icon1,
    title: '银行级安全保障',
    desc: 'PCI DSS认证，多重加密技术，实时风控系统，每笔交易全程保护，保障资金安全'
  },
  {
    icon: icon2,
    title: '全球支付接入',
    desc: '支持全球主流支付方式，包括信用卡、借记卡、电子钱包等，满足不同国家和地区的支付需求'
  },
  {
    icon: icon3,
    title: '快速接入',
    desc: '提供丰富的API接口，支持快速接入，降低接入成本，提高业务效率'
  },
  {
    icon: icon4,
    title: '灵活定制',
    desc: '根据您的业务需求，提供定制化的支付解决方案，满足您的个性化需求'
  },
  {
    icon: icon5,
    title: '专业服务',
    desc: '提供7x24小时在线客服，快速响应客户需求，确保客户满意度'
  },
  {
    icon: icon6,
    title: '合规经营',
    desc: '遵循国际支付行业标准和法规，确保合规经营，降低合规风险'
  }
])
</script>

<style scoped lang="scss">
.advantage-grid {
  display: grid;
  grid-template-columns: repeat(3, 371px);
  justify-content: center;
  grid-gap: 36px 48px;
  .advantage-item {
    height: 275px;
    padding: 31px 34px 0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0px 3.92px 20px 0px rgba(0, 0, 0, 0.08);
    .icon-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 91px;
      height: 70px;
      border-radius: 35px;
      background: rgba(0, 48, 135, 0.08);
      margin: 0 auto;
      img {
        height: 31px;
      }
    }
  }
}
</style>
